<template>
	<view class="Login-box">
		<view class="Login-top">
			<view class="Login-top-img">
				<u-image width="287upx" height="87upx" :src="src"></u-image>
			</view>
			<view class="Login-top-text">
				<view>91搜课平台—机构端</view>
			</view>
		</view>
		<view class="Login-auto">
			<view>
				<view class="ChangePassword-auto">
					<u-form :model="form" ref="uForm">
						<u-form-item left-icon="photo" prop="password">
							<u-input v-model="form.mobile" placeholder="请输入账号"></u-input>
						</u-form-item>
						<u-form-item left-icon="lock" label-width="200" prop="password">
							<u-input :password-icon="true" :border="border" type="password" v-model="form.password" placeholder="请输入密码"></u-input>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		<view class="Login-bottom">
			<u-button type="primary" @click="submit">登录</u-button>
			<view class="Login-bottom-text">
				技术支持@91搜课
			</view>
		</view>
		<!-- <tfggVerify ref="verifyElement" @verifyResult="verifyResult"></tfggVerify> -->
	</view>
</template>

<script>
	// import tfggVerify from '../../components/tfgg-verify/tfgg-verify.vue'
	export default {
		data() {
			return {
				src: '../../static/91logo.png',
				form: {
					mobile: '',
					password: '',
				},
				rules: {

				},
				border: false,
				errorType: ['message'],
				validResult: {},
				captchaObj: {}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			this.getGeetest()
		},
		methods: {
			getGeetest() {
			    var that = this
				this.$request('', '/manageApi/getGeetest', 'GET', {
				}).then(res => {
					  let data = res.data;
					  console.log(data)
					  initGeetest({
					      gt: data.gt,
					      challenge: data.challenge,
					      offline: !data.success,
					      new_captcha: true,
					      width: "100%",
					      product: 'bind'
					  }, function(captchaObj){
						  // console.log(captchaObj)
						  that.captchaObj = captchaObj
					      captchaObj.onReady(function(){
					          //验证码ready之后才能调用verify方法显示验证码
					      }).onSuccess(function(){
					          //your code
							  that.validResult = captchaObj.getValidate();
							 that.login(that.validResult)
					      }).onError(function(){
					          //your code
							  console.log('失败')
					      })
					      // 按钮提交事件
					      // button.click = function(){
					      //     // some code
					      //     // 检测验证码是否ready, 验证码的onReady是否执行
					      //     captchaObj.verify(); //显示验证码
					      //     // some code
					      // }
					  });
				})
			},
			getShow() {
				this.captchaObj.verify();
				
			},
			submit() {
				this.icon1 = 'map';
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.getShow()
						// this.verifyFasong()
						// return
						// this.login()
					} else {
						console.log('验证失败');
					}
				});
			},
			login (validResult) {
				var password = this.$md5(this.form.password)
				var param = {
					username: this.form.mobile,
					password: password,
					geetest_challenge: validResult.geetest_challenge,
					geetest_validate: validResult.geetest_validate,
					geetest_seccode: validResult.geetest_seccode
				}
				this.$request('', '/manageApi/login', 'POST', param, {
				}).then(res => {
					if(res.message == '登录成功'){
						uni.showToast({
						  title: '登录成功',
							icon: 'none',
						  duration: 2000
						});
						uni.switchTab({
							url: '/pages/market/homepage/index'
						})
						uni.setStorageSync('userInfo', res.data)
					} else {
						uni.showToast({
						  title: res.message,
						  icon: 'none',
						  duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style>
	.Login-box{
		padding: 200upx 70upx;
	}
	.Login-top{
		padding: 40upx;
	}
	.Login-top-img{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.Login-top-text{
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.Login-bottom{
		margin-top: 50upx;
	}
	.Login-bottom-text{
		position: fixed;
		bottom: 50px;
		text-align: center;
		width: 100%;
		left: 0;color: #999999;
	}
</style>
